<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>DocGrids - Documentation Bootstrap 5 HTML Template</title>

<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/LineIcons.3.0.css">
<link rel="stylesheet" href="static/css/simple-bar.css">
<link rel="stylesheet" href="static/css/main.css">
</head>
<body class="position-relative" data-bs-spy="scroll" data-bs-target="#navbar-example2" tabindex="0">

<div class="preloader">
<div class="preloader-inner">
<div class="preloader-icon">
<span></span>
<span></span>
</div>
</div>
</div>


<header class="header navbar-area others-pages">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<div class="nav-inner">

<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index.html">
<img src="static/picture/logo.svg" alt="Logo">
</a>
<button class="navbar-toggler mobile-menu-btn" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggler-icon"></span>
<span class="toggler-icon"></span>
<span class="toggler-icon"></span>
</button>
<div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
<ul id="nav" class="navbar-nav ms-auto">
<li class="nav-item">
<a href="index.html" aria-label="Toggle navigation">Home</a>
</li>
<li class="nav-item">
<a href="" class="active" aria-label="Toggle navigation">Documentation</a>
</li>
<li class="nav-item">
<a href="contact.html" aria-label="Toggle navigation">Support</a>
</li>
</ul>
</div> 
<div class="button">
<a href="contact.html" class="btn">Create a Ticket <i class="lni lni-ticket"></i></a>
</div>
</nav>

</div>
</div>
</div> 
</div> 
</header>

<main>
<button class="menu-button menu-open">
<span></span>
<span></span>
<span></span>
</button>
<div class="doc_overlay"></div>
<div class="container doc_container">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-4 col-12">

<aside data-simplebar="" class="doc-sidebar">
<button class="menu-button menu-close">
<span></span>
<span></span>
</button>
<nav class="sidenav" id="navbar-example2">
<ul class="nav flex-column">
<li>
<h6><i class="lni lni-list"></i> Getting Started</h6>
</li>
<li class="nav-item">
<a href="#installation" class="nav-link active">Installation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#quick-start">Theme setup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#layout-theme">Layout</a>
</li>
<li>
<h6><i class="lni lni-grid-alt"></i> Elements</h6>
</li>
<li class="nav-item">
<a class="nav-link" href="#tabs">Tabs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#icons">Icons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#buttons">Buttons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#alerts">Alerts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#accordions">Accordions
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#image-hotspots">Image Hotspots</a>
</li>
<li>
<h6><i class="lni lni-notepad"></i> Content</h6>
</li>
<li class="nav-item">
<a class="nav-link" href="#video">Video Widget</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tables">Tables</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#keyboard-shortcuts">Keyboard Shortcuts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#list-items">List Items Style</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#changelog">Changelog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#credits">Credits</a>
</li>
</ul>
</nav>
</aside>

</div>
<div class="col-xl-9 col-lg-9 col-12">
<section class="main-section" data-bs-target="#navbar-example3" tabindex="0">
<div class="doc-main-wrapper">

<div id="installation" class="welcome mb-30">
<h1 class="mb-30">
Welcome To <span class="template-name">DocGrids.</span>
</h1>
<p>
Firstly, a huge thanks for purchasing this Template, your support
is truly appreciated!
</p>
<p class="mb-30">
This document covers the installation and use of this theme and
often reveals answers to common problems and issues - read this
document thoroughly if you are experiencing any difficulties. If
you have any questions that are beyond the scope of this document,
feel free to
<a href="contact.html" class="ticket" target="_blank"> Open a Support
Ticket </a>
</p>
<div class="author-info">
<img src="static/picture/avatar-image.png" alt="#">
<div>
<p class="name">Written by Musharof</p>
<span>Sep 15, 2023</span>
</div>
</div>
</div>


<div id="quick-start" class="installing mb-30">
<div class="doc-title">
<h2>Basic theme setup</h2>
</div>
<p class="mb-10">
To start using this
<span class="template-name text-medium"> DocGrids </span> design
system you will first need to import some files in your project or
download ready to use starter templates.
</p>
<p class="mb-10">This template requires Node and Gulp CLI. Please follow these steps to
install the required technologies:</p>
<ol class="mb-30" style="list-style: auto; padding-left: 20px;">
<li>
<p class="mb-10">Make sure you have Node locally installed.</p>
</li>
<li>
<p class="mb-10">Download Gulp Command Line Interface to be able to use gulp in
your Terminal.</p>
</li>
<pre data-simplebar="" class="code-box"> <button class="copy-btn">Copy</button><code>yarn add gulp-cli -g</code></pre>
<li>
<p class="mb-10">After installing Gulp, run yarn install in the main plainadmin/
folder to download all the project dependencies. You’ll find them in the
node_modules/ folder.</p>
</li>
<pre data-simplebar="" class="code-box"> <button class="copy-btn">Copy</button><code>yarn add</code> </pre>
<li>
<p class="mb-10">Run gulp in the plainadmin/ folder to serve the project files
using BrowserSync. Running gulp will compile the theme and open /index.html
in your main browser.</p>
</li>
<pre data-simplebar="" class="code-box"> <button class="copy-btn">Copy</button><code>gulp</code> </pre>
<p class="mb-10"> While the gulp command is running, files in the assets/scss/ and
all html files will be monitored for changes. Files from the assets/scss/ folder
will generate injected CSS. </p>
<p> Hit CTRL+C to terminate the gulp command. This will stop the local server from
running. </p>
</ol>
<div class="box">
<h5 class="mb-10">CSS</h5>
<p class="mb-10">
Copy and paste the stylesheet <mark> &lt;link> </mark> into your
<mark> &lt;head> </mark> before all other stylesheets to load
our CSS.
</p>
<pre data-simplebar="" class="code-box"><button class="copy-btn">Copy</button><code>
&lt;!-- ========== All CSS files linkup ========= -->
&lt;link rel="stylesheet" href="assets/css/bootstrap.min.css" />
&lt;link rel="stylesheet" href="assets/css/LineIcons.css" />
&lt;link rel="stylesheet" href="assets/css/fullcalendar.css" />
&lt;link rel="stylesheet" href="assets/css/morris.css" />
&lt;link rel="stylesheet" href="assets/css/main.css" />
</code>
</pre>
</div> 
<div class="box">
<h5 class="mb-10">JS</h5>
<p class="mb-10">
Most of bootstrap components require the use of JavaScript to
function. Specifically, they require Bootstrap.bundle.js. We
added some popular plugins in the <mark> /js </mark> folder. Our
<mark> main.js </mark> file contains some additional scripts
which may come handy for your project.
</p>
<pre data-simplebar="" class="code-box"><button class="copy-btn">Copy</button><code>
&lt;!-- ========= All Javascript files linkup ======== -->
&lt;script src="assets/js/bootstrap.bundle.min.js">
&lt;script src="assets/js/Chart.min.js">
&lt;script src="assets/js/apexcharts.min.js">
&lt;script src="assets/js/dynamic-pie-chart.js">
&lt;script src="assets/js/moment.min.js">
&lt;script src="assets/js/fullcalendar.js">
&lt;script src="assets/js/jsvectormap.min.js">
&lt;script src="assets/js/world-merc.js">
&lt;script src="assets/js/polyfill.js">
&lt;script src="assets/js/main.js">

&lt;script const menuButtonOpen = document.querySelector(".menu-open");
  // ===== copy code 
  const copyButton = document.querySelectorAll('.copy-btn');
  copyButton.forEach(element => {
    element.addEventListener('click', (e) => {
      const elem = e.target.parentElement.children[1].innerText;
      const el = document.createElement('textarea');

      console.log(elem)
      el.value = elem;

      document.body.appendChild(el);

      el.select();
      document.execCommand("copy");
      alert(`Code Copied!`)
      document.body.removeChild(el)
    })
&lt;/script>
</code>
</pre>
</div> 
</div>


<div id="layout-theme" class="pt-30">
<div class="doc-title">
<h2>Layout and Theme</h2>
</div>
<p class="mb-30" id="layout">
We designed this template with two layouts. Right Sidebar and Left Sidebar. Default
layout come with Left Sidebar. If you want Right Sidebar you have to add <mark>
.rightSidebar </mark> this class at <mark> &lt;body> </mark> tag.
</p>
<pre data-simplebar="" class="code-box"><button class="copy-btn">Copy</button><code>
  &lt;body class="rightSidebar">
    .....
    Content Here
    .....
  &lt;/body>
</code>
</pre>
<p class="mb-30" id="theme">
We designed this template with two Theme. Light Theme and Dark Theme. Default theme
come with Light Version. If you want Dark Version you have to add <mark> .darkTheme
</mark> this class at <mark> &lt;body> </mark> tag.
</p>
<pre data-simplebar="" class="code-box"><button class="copy-btn">Copy</button><code>
  &lt;body class="darkTheme">
    .....
    Content Here
    .....
  &lt;/body>
</code>
</pre>
</div>

<div class="content pt-30 pb-20">
<div class="doc-title">
<h2>Elements</h2>
</div>
<p>James Bond knackered cup of char show off show off pick your nose and blow off faff about it’s all
gone to pot tosser that so I said.</p>

<div class="article-list mt-30">
<ul>
<li><a href="#tabs"><i class="lni lni-notepad"></i> Tabs</a></li>
<li><a href="#icons"><i class="lni lni-notepad"></i> Icons</a></li>
<li><a href="#buttons"><i class="lni lni-notepad"></i> Buttons</a></li>
<li><a href="#alerts"><i class="lni lni-notepad"></i> Alerts</a></li>
<li><a href="#accordions"><i class="lni lni-notepad"></i> Accordions</a></li>
<li><a href="#image-hotspots"><i class="lni lni-notepad"></i> Image Hotspots</a></li>
</ul>
</div>

</div>

<div id="tabs" class="pt-30">
<div class="doc-title">
<h2>Tabs Widget</h2>
<h5>Tab Style 1</h5>
</div>
<div class="box">
<div class="example-box">
<div class="row">
<div class="col-lg-12">
<div class="tab-style-1">
<nav class="nav" id="nav-tab">
<button class="active" id="tab-1-1" data-bs-toggle="tab" data-bs-target="#tabContent-1-1">
Home
</button>
<button id="tab-1-2" data-bs-toggle="tab" data-bs-target="#tabContent-1-2">
Profile
</button>
<button id="tab-1-3" data-bs-toggle="tab" data-bs-target="#tabContent-1-3">
Contact
</button>
</nav>
<div class="tab-content" id="nav-tabContent1">
<div class="tab-pane fade show active" id="tabContent-1-1">
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
</p>
<p>
It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.Lorem
Ipsum is simply dummy text.</p>
</div>
<div class="tab-pane fade" id="tabContent-1-2">
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
</p>
<p>
It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.Lorem
Ipsum is simply dummy text.</p>
</div>
<div class="tab-pane fade" id="tabContent-1-3">
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
</p>
<p>
It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.Lorem
Ipsum is simply dummy text.</p>
</div>
</div>
</div>

</div>
 
</div>
</div>
<h5 class="mt-40">Tab Style 2</h5>
<div class="example-box">
<div class="row">
<div class="col-lg-12">
<div class="tab-style-2">
<nav class="nav" id="nav-tab">
<button class="active" id="tab-1-11" data-bs-toggle="tab" data-bs-target="#tabContent-1-11">
<spna class="serial">1</spna><span>Home</span>
</button>
<button id="tab-1-22" data-bs-toggle="tab" data-bs-target="#tabContent-1-22">
<spna class="serial">2</spna><span>Profile</span>
</button>
<button id="tab-1-33" data-bs-toggle="tab" data-bs-target="#tabContent-1-33">
<spna class="serial">3</spna><span>Contact</span>
</button>
</nav>
<div class="tab-content" id="nav-tabContent1">
<div class="tab-pane fade show active" id="tabContent-1-11">
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
</p>
<p>
It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.Lorem
Ipsum is simply dummy text.</p>
</div>
<div class="tab-pane fade" id="tabContent-1-22">
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
</p>
<p>
It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.Lorem
Ipsum is simply dummy text.</p>
</div>
<div class="tab-pane fade" id="tabContent-1-33">
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
 scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
</p>
<p>
It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.Lorem
Ipsum is simply dummy text.</p>
</div>
</div>
</div>

</div>

</div>
</div>
<h5 class="mt-40">Tab Style 3</h5>
<div class="example-box">
<div class="row">
<div class="col-lg-12">
<div class="tab-style-3">
<nav class="nav" id="nav-tab">
<button class="active" id="tab-1-111" data-bs-toggle="tab" data-bs-target="#tabContent-1-111">
Home
</button>
<button id="tab-1-222" data-bs-toggle="tab" data-bs-target="#tabContent-1-222">
Profile
</button>
<button id="tab-1-333" data-bs-toggle="tab" data-bs-target="#tabContent-1-333">
Contact
</button>
</nav>
<div class="tab-content" id="nav-tabContent1">
<div class="tab-pane fade show active" id="tabContent-1-111">
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
</p>
<p>
It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.Lorem
Ipsum is simply dummy text.</p>
</div>
<div class="tab-pane fade" id="tabContent-1-222">
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
</p>
<p>
It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.Lorem
Ipsum is simply dummy text.</p>
</div>
<div class="tab-pane fade" id="tabContent-1-333">
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
</p>
<p>
It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.Lorem
Ipsum is simply dummy text.</p>
</div>
</div>
</div>

</div>

</div>
</div>
</div>
</div>


<div id="icons" class="pt-30">
<div class="doc-title">
<h2>Icons</h2>
</div>
<p class="mb-30">
We Use LineIcons in our template. You can use any Icon from
LineIcons. You have to include <br><mark> assets/fonts </mark> this folder in your
project folder and <mark> assets/css/lineIcons.css</mark> these files also.
</p>
<div class="box">
<h5 class="mb-10 text-medium" id="lineicons">Line Icons</h5>
<div class="example-box">
<div class="icons-wrapper">
<ul class="icons">
<li class="trigger Free">
<i class="lni lni-500px"></i><span>500px</span>
</li>
<li class="trigger Free">
<i class="lni lni-add-files"></i><span>add-files</span>
</li>
<li class="trigger Free">
<i class="lni lni-adobe"></i><span>adobe</span>
</li>
<li class="trigger Free">
<i class="lni lni-agenda"></i><span>agenda</span>
</li>
<li class="trigger Free">
<i class="lni lni-airbnb"></i><span>airbnb</span>
</li>
<li class="trigger Free">
<i class="lni lni-alarm"></i><span>alarm</span>
</li>
<li class="trigger Free">
<i class="lni lni-alarm-clock"></i><span>alarm-clock</span>
</li>
<li class="trigger Free">
<i class="lni lni-amazon"></i><span>amazon</span>
</li>
<li class="trigger Free">
<i class="lni lni-amazon-original"></i><span>amazon-original</span>
</li>
</ul>
</div>
</div>
</div>
</div>


<div id="buttons" class="pt-20">
<div class="doc-title">
<h2>Buttons</h2>
</div>
<div class="box" id="default-buttons">
<p class="mb-10">
Buttons show what action will happen when the user clicks or touches it. Bootstrap buttons are
used to initialize operations, both in the background or foreground of an experience.
</p>
<h5 class="mb-10 mt-20"> Default Buttons</h5>
<p class="mb-10">
Default Buttons are comes with 4px corner radius and predefine styles.
</p>
<div class="example-box">
<ul class="buttons-group mb-10">
<li>
<a href="#0" class="main-btn primary-btn btn-hover"> Primary </a>
</li>
<li>
<a href="#0" class="main-btn secondary-btn btn-hover"> Secondary </a>
</li>
<li>
<a href="#0" class="main-btn success-btn btn-hover"> Success </a>
</li>
<li>
<a href="#0" class="main-btn danger-btn btn-hover"> Danger </a>
</li>
<li>
<a href="#0" class="main-btn warning-btn btn-hover"> Warning </a>
</li>
<li>
<a href="#0" class="main-btn info-btn btn-hover"> Info </a>
</li>
<li>
<a href="#0" class="main-btn dark-btn btn-hover"> Dark </a>
</li>
<li>
<a href="#0" class="main-btn light-btn btn-hover"> Light </a>
</li>
<li>
<a href="#0" class="main-btn active-btn btn-hover"> Active </a>
</li>
<li>
<a href="#0" class="main-btn deactive-btn btn-hover"> Deactive </a>
</li>
</ul>
</div>
<pre data-simplebar="" class="code-box"><button class="copy-btn">Copy</button><code>
&lt;ul class="buttons-group">
&lt;li>
&lt;a href="#0" class="main-btn primary-btn btn-hover"> Primary &lt;/a>
&lt;/li>
&lt;li>
&lt;a href="#0" class="main-btn secondary-btn btn-hover"> Secondary &lt;/a>
&lt;/li>
&lt;li>
&lt;a href="#0" class="main-btn success-btn btn-hover"> Success &lt;/a>
&lt;/li>
&lt;li>
&lt;a href="#0" class="main-btn danger-btn btn-hover"> Danger &lt;/a>
&lt;/li>
&lt;li>
&lt;a href="#0" class="main-btn warning-btn btn-hover"> Warning &lt;/a>
&lt;/li>
&lt;li>
&lt;a href="#0" class="main-btn info-btn btn-hover"> Info &lt;/a>
&lt;/li>
&lt;li>
&lt;a href="#0" class="main-btn dark-btn btn-hover"> Dark &lt;/a>
&lt;/li>
&lt;li>
&lt;a href="#0" class="main-btn light-btn btn-hover"> Light &lt;/a>
&lt;/li>
&lt;li>
&lt;a href="#0" class="main-btn active-btn btn-hover"> Active &lt;/a>
&lt;/li>
&lt;li>
&lt;a href="#0" class="main-btn deactive-btn btn-hover"> Deactive &lt;/a>
&lt;/li>
&lt;/ul>
                    </code>
                    </pre>
</div>
</div>


<div id="alerts" class="pt-30">
<div class="doc-title">
<h2>Alerts
</h2>
</div>
<div class="box">
<h5 class="mb-10">Notice Widget</h5>
<div class="example-box">
<div class="alert-list-wrapper">
<div class="alert-box primary-alert">
<div class="alert">
<div class="alert-icon">
<i class="lni lni-bullhorn"></i>
</div>
<div class="content">
<h6>Notice Message! Your message here</h6>
<p>Do one don’t get shirty with me naff only a quid the full monty at public school
burke
Jeffrey smashing, blatant ruddy fanny around Charles.</p>
</div>
</div>
</div>

<div class="alert-box danger-alert">
<div class="alert">
<div class="alert-icon">
<i class="lni lni-cross-circle"></i>
</div>
<div class="content">
<h6>Key Warnings</h6>
<p>Do one don’t get shirty with me naff only a quid the full monty at public school
burke
Jeffrey smashing, blatant ruddy fanny around Charles.</p>
</div>
</div>
</div>

<div class="alert-box success-alert">
<div class="alert">
<div class="alert-icon">
<i class="lni lni-checkmark-circle"></i>
</div>
<div class="content">
<h6>Success Message</h6>
<p>Do one don’t get shirty with me naff only a quid the full monty at public school
burke
Jeffrey smashing, blatant ruddy fanny around Charles.</p>
</div>
</div>
</div>

<div class="alert-box gray-alert">
<div class="alert">
<div class="alert-icon">
<i class="lni lni-question-circle"></i>
</div>
<div class="content">
<h6>Information Message</h6>
<p>Do one don’t get shirty with me naff only a quid the full monty at public school
burke
Jeffrey smashing, blatant ruddy fanny around Charles.</p>
</div>
</div>
</div>

</div>
</div>
<h5 class="mb-10 mt-50">Explanations</h5>
<div class="example-box">
<div class="explanations">

<div class="single-explanation">
<div class="content">
<h4>Explanations</h4>
<p>To do this, simple navigate to wp-dashboard->User Frontend->Settings. From Settings,
open
the E-Mails page. The first 2 fields are all that you need to configure the email
notification for guest users.</p>
</div>
</div>


<div class="single-explanation red">
<div class="content">
 <h4>Explanations</h4>
<p>To do this, simple navigate to wp-dashboard->User Frontend->Settings. From Settings,
open
the E-Mails page. The first 2 fields are all that you need to configure the email
notification for guest users.</p>
</div>
</div>


<div class="single-explanation green">
<div class="content">
<h4>Explanations</h4>
<p>To do this, simple navigate to wp-dashboard->User Frontend->Settings. From Settings,
open
the E-Mails page. The first 2 fields are all that you need to configure the email
notification for guest users.</p>
</div>
</div>


<div class="single-explanation gray">
<div class="content">
<h4>Explanations</h4>
<p>To do this, simple navigate to wp-dashboard->User Frontend->Settings. From Settings,
open
the E-Mails page. The first 2 fields are all that you need to configure the email
notification for guest users.</p>
</div>
</div>

</div>
</div>
</div>
</div>


<div id="accordions" class="pt-30">
<div class="doc-title">
<h2>Accordions
</h2>
</div>
<div class="box">
<h5 class="mb-10">Accordions Widget</h5>
<div class="example-box">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span>Material types can you work with?</span><i class="lni lni-plus"></i>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
ultrices gravida.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span>Is Smart Lock required for instant apps?</span><i class="lni lni-chevron-down"></i>
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
ultrices gravida.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
ultrices gravida.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span>Can I have multiple activities in a single feature?</span><i class="lni lni-chevron-down"></i>
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
ultrices gravida.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<span>Can I share resources between features?</span><i class="lni lni-chevron-down"></i>
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
ultrices gravida.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<div id="image-hotspots" class="pt-30">
<div class="doc-title">
<h2>Image Hotspots Widget
</h2>
</div>
<div class="box">
<p>A Dashboard is a convenient way to get an overview of the the current status of your tasks and
monitorthe progress of your team.</p>
<div class="example-box">
<div class="hotspots-content">
<button type="button" class="tooltip-button point-one" data-bs-toggle="tooltip" data-bs-placement="top" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.">
</button>
<button type="button" class="tooltip-button point-two" data-bs-toggle="tooltip" data-bs-placement="top" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.">
</button>
<button type="button" class="tooltip-button point-three" data-bs-toggle="tooltip" data-bs-placement="top" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.">
</button>
<img src="static/picture/image-hotstop.jpg" alt="#">
</div>
</div>
</div>
</div>

<div class="content pt-30 pb-10">
<div class="doc-title">
<h2>Content</h2>
</div>
<p>Video, Table, Tooltips, List Items, Keyboard Shortcuts and others content related shortcodes
contains in this section.</p>

<div class="article-list mt-30">
<ul>
<li><a href="#video"><i class="lni lni-notepad"></i> Video Widget</a></li>
<li><a href="#tables"><i class="lni lni-notepad"></i> Table Widget</a></li>
<li><a href="#keyboard-shortcuts"><i class="lni lni-notepad"></i> Keyboard Shortcuts</a></li>
<li><a href="#list-items"><i class="lni lni-notepad"></i> List Items Style</a></li>
<li><a href="#changelog"><i class="lni lni-notepad"></i> Changelog</a></li>
<li><a href="#credits"><i class="lni lni-notepad"></i> Credits</a></li>
</ul>
</div>

</div>

<div id="video" class="pt-30">
<div class="doc-title">
<h2>Video Widget
</h2>
</div>
<div class="box">
<h5 class="mb-20">YouTube Video</h5>
<p>Video is an electronic medium for the recording, copying, playback, broadcasting, and display
of
moving visual media. Video was first developed for mechanical</p>
<div class="example-box">
<div class="main-video">
<iframe title="jQuery Tutorial #1 - jQuery Tutorial for Beginners" src="javascript:;"></iframe>
</div>
</div>
</div>
</div>


<div id="tables" class="pt-30">
<div class="doc-title">
<h2>Tables</h2>
</div>
<p class="mb-30">A table is a collection of
related data held in a table format within a database. It consists of columns and rows.
as we use Bootstrap you can access any of Bootstrap table in you project.
</p>
<div class="box">
<h5 class="text-medium">Basic Table</h5>
<div class="example-box">
<div class="table-wrapper table-responsive">
<table class="table">
<thead>
<tr>
<th>
<h6>Sample ID</h6>
</th>
<th>
<h6>Reading #1</h6>
</th>
<th>
<h6>Reading #2</h6>
</th>
<th>
<h6>Reading #3</h6>
</th>
 <th>
<h6>Reading #4</h6>
</th>
</tr>

</thead>
<tbody>

<tr>
<td class="min-width">
<p>Manually</p>
</td>
<td class="min-width">
<p>555</p>
</td>
<td class="min-width">
<p>523</p>
</td>
<td class="min-width">
<p>452</p>
</td>
<td class="min-width">
<p>7858</p>
</td>
</tr>


<tr>
<td class="min-width">
<p>Shortcuts</p>
</td>
<td class="min-width">
<p>354</p>
</td>
<td class="min-width">
<p>845</p>
</td>
<td class="min-width">
<p>452</p>
</td>
<td class="min-width">
<p>2447</p>
</td>
</tr>


<tr>
<td class="min-width">
<p>Content</p>
</td>
<td class="min-width">
<p>741</p>
</td>
<td class="min-width">
<p>844</p>
</td>
<td class="min-width">
<p>321</p>
</td>
<td class="min-width">
<p>9952</p>
</td>
</tr>


<tr>
<td class="min-width">
<p>Keyboard</p>
</td>
<td class="min-width">
<p>813</p>
</td>
<td class="min-width">
<p>534</p>
</td>
<td class="min-width">
<p>458</p>
</td>
<td class="min-width">
<p>4525</p>
</td>
</tr>


<tr>
<td class="min-width">
<p>Timeline</p>
</td>
<td class="min-width">
<p>775</p>
</td>
<td class="min-width">
<p>365</p>
</td>
<td class="min-width">
 <p>512</p>
</td>
<td class="min-width">
<p>8748</p>
</td>
</tr>


<tr>
<td class="min-width">
<p>Manually</p>
</td>
<td class="min-width">
<p>354</p>
</td>
<td class="min-width">
<p>224</p>
</td>
<td class="min-width">
<p>1234</p>
</td>
<td class="min-width">
<p>8456</p>
</td>
</tr>


<tr>
<td class="min-width">
<p>Pomodoro</p>
</td>
<td class="min-width">
<p>2354</p>
</td>
<td class="min-width">
<p>6354</p>
</td>
<td class="min-width">
<p>587</p>
</td>
<td class="min-width">
<p>4545</p>
</td>
</tr>

</tbody>
</table>

</div>
</div>
</div>
</div>


<div id="keyboard-shortcuts" class="pt-30">
<div class="doc-title">
<h2>Keyboard Shortcuts</h2>
</div>
<p class="mb-30">Switch the OS dropdown on the right sidebar to see the specific keyboard shortcuts
according to your OS. Keyboard shortcuts help you navigate Slack with minimal effort. You can see
a
quick list of shortcuts by pressing <mark>⌘/</mark> (Mac) and
<mark>Ctrl/</mark> (Windows/Linux) or
take a look at the
detailed lists
below.
</p>
<h5>Keyboard shortcuts in List Style</h5>
<ul class="shortcuts-list mt-30">
<li>Align right – click Align right or use the shortcut
<mark>Ctrl</mark><mark>Shift</mark><mark>R</mark>
or <mark>⌘</mark><mark>Shift</mark><mark>R</mark>
</li>
<li>Align left – click Align left or use
<mark>Alt</mark><mark>A</mark>or <mark>⌘</mark><mark>A</mark>
</li>
<li>Align center – click Align center or use
<mark>Alt</mark><mark>D</mark>or <mark>⌘</mark><mark>D</mark>
</li>
<li>Align middle – click Align middle or use
<mark>Alt</mark><mark>M</mark>or <mark>⌘</mark><mark>M</mark>
</li>
</ul>
<div class="box">
<div class="example-box">
<div class="table-wrapper table-responsive">
<table class="table shortcuts-table-list">
<thead>
<tr>
<th>
 <h6>Action</h6>
</th>
<th>
<h6>Shortcut Key</h6>
</th>
</tr>

</thead>
<tbody>

<tr>
<td class="min-width">
<p>Previous unread channel or DM</p>
</td>
<td class="min-width">
<p><mark>Alt</mark><mark>A</mark><mark>⌘</mark><mark>A</mark></p>
</td>
</tr>


<tr>
<td class="min-width">
<p>Jump to a conversation</p>
</td>
<td class="min-width">
<p><mark>Ctrl</mark><mark>K</mark><mark>⌘</mark><mark>K</mark></p>
</td>
</tr>


<tr>
<td class="min-width">
<p>Move focus to the previous section</p>
</td>
<td class="min-width">
<p><mark>Ctrl</mark><mark>Z</mark><mark>⌘</mark><mark>Z</mark></p>
</td>
</tr>


<tr>
<td class="min-width">
<p>Compose a new message</p>
</td>
<td class="min-width">
<p><mark>Ctrl</mark><mark>N</mark><mark>⌘</mark><mark>N</mark></p>
</td>
</tr>


<tr>
<td class="min-width">
<p>Previous channel or DM visited</p>
</td>
<td class="min-width">
<p><mark>Ctrl</mark><mark>]</mark><mark>⌘</mark><mark>]</mark></p>
</td>
</tr>

</tbody>
</table>

</div>
</div>
</div>
</div>


<div id="list-items" class="pt-30">
<div class="doc-title">
<h2>List Items Style</h2>
</div>
<h5 class="mb-25">Unordered list items</h5>
<div class="example-box mt-30">
<ul class="unordered-list">
<li>Consectetur adipiscing elit dummy</li>
<li>Integer molestie lorem at massa </li>
<li>When an unknown printer took a scrambled</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Many desktop publishing and web page editors</li>
</ul>
</div>
<h5 class="mb-25 mt-45">Ordered list items</h5>
<div class="example-box mt-30">
<ol class="ordered-list" style="list-style: auto; padding-left: 20px;">
<li>
Make sure you have Node locally installed.
</li>
<li>
Download Gulp Command Line Interface to be able to use gulp in
your Terminal.
</li>
<li>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece
</li>
<li>There are many variations of passages of Lorem Ipsum available, but the majority have
suffered
alteration
</li>
</ol>
</div>
</div>


<div id="changelog" class="pt-30 changelog">
<div class="doc-title">
<h2>Changelog</h2>
</div>
<div class="example-box mt-30">

<div class="single-changelog">
<div class="log-subject update">
<div class="content">
<i class="lni lni-rocket"></i>
<span>Update</span>
</div>
</div>
<div class="log-content">
<h5 class="title">DocGrids Help Center v1.0 is released!</h5>
<span class="date">Updated over a week ago</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie eu leo at consequat.
Maecenas finibus pellentesque nibh, nec pretium nisl ultrices at. Ut est enim, egestas at
purus
non, viverra mollis arcu. Quisque leo felis, fringilla.
</p>
<ol class="ordered-list mt-25" style="list-style: auto; padding-left: 20px;">
<li>Search form overlaps by the overlay color on focus</li>
<li>Added Services, Cases pages </li>
<li>Added WooCommerce functionality</li>
</ol>
</div>
</div>


<div class="single-changelog">
<div class="log-subject bug-fix">
<div class="content">
<i class="lni lni-bug"></i>
<span>Bug Fix</span>
</div>
</div>
<div class="log-content">
<h5 class="title">Login Auth Issue Fixed on DocGrids</h5>
<span class="date">Updated over a week ago</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie eu leo at consequat.
Maecenas finibus pellentesque nibh, nec pretium nisl ultrices at. Ut est enim, egestas at
purus
non, viverra mollis arcu. Quisque leo felis.
</p>
<p>viverra mollis arcu. Quisque leo felis, fringilla eu elementum vestibulum, consequat et mi.
Fringilla eu elementum vestibulum, consequat et mi.</p>
</div>
</div>


<div class="single-changelog">
<div class="log-subject new">
<div class="content">
<i class="lni lni-move"></i>
<span>Feature</span>
</div>
</div>
<div class="log-content">
<h5 class="title">DocGrids new feature is released!</h5>
<span class="date">Updated 10 days ago</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie eu leo at consequat.
Maecenas finibus pellentesque nibh, nec pretium nisl ultrices at. Ut est enim.
</p>
</div>
</div>

</div>
</div>


<div id="credits" class="credit pt-30">
<div class="doc-title">
<h2>Credits</h2>
</div>
<ul class="credit-list">
<li>
<a href="javascript:;" target="_blank">
Bootstrap
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
LineIcons
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
Material Design Icon
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
Full Calendar
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
Chart.js
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
Moment.js
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
Apex Chart
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
JVector Map
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
Unsplash
</a>
</li>
</ul>
</div>

</div>
</section>
</div>
</div>
</div>
</main>

<a href="#" class="scroll-top">
<i class="lni lni-chevron-up"></i>
</a>

<script src="static/js/popper.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/simple-bar.js"></script>
<script src="static/js/main.js"></script>
<script>
    const menuButtonOpen = document.querySelector(".menu-open");
    const menuButtonClose = document.querySelector(".menu-close");
    const sidebar = document.querySelector(".doc-sidebar");
    const docOverlay = document.querySelector(".doc_overlay");

    menuButtonOpen.addEventListener("click", () => {
      sidebar.classList.add("show");
      docOverlay.classList.add('open');
    });
    menuButtonClose.addEventListener("click", () => {
      sidebar.classList.remove("show");
      docOverlay.classList.remove('open');
    });
    docOverlay.addEventListener("click", () => {
      sidebar.classList.remove("show");
      docOverlay.classList.remove('open');
    });


    // ===== copy code 
    const copyButton = document.querySelectorAll('.copy-btn');
    copyButton.forEach(element => {
      element.addEventListener('click', (e) => {
        const elem = e.target.parentElement.children[1].innerText;
        const el = document.createElement('textarea');

        console.log(elem)
        el.value = elem;

        document.body.appendChild(el);

        el.select();
        document.execCommand("copy");
        alert(`Code Copied!`)
        document.body.removeChild(el)
      })
    });
  </script>
<script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
  </script>
</body>
</html>